<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <el-dialog v-bind="$attrs"
               :visible.sync="dialogVisible"
               :append-to-body="true"
               top="8vh"
               :close-on-click-modal="false"
               v-on="$listeners" @open="onOpen" @close="onClose" :title="dialogTitle">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
          <el-col :span="12">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入用户名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入手机号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型" prop="userType">
              <el-select v-model="formData.userType" placeholder="请选择用户类型"
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="small">
                <el-radio-button v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                 :disabled="item.disabled">{{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择角色" prop="roleIds">
              <el-select v-model="formData.roleIds" placeholder="请选择选择角色" multiple filterable clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in roleIdsOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status" required>
              <el-switch v-model="formData.status" active-text="正常" inactive-text="锁定" active-color="#009DFF"
                         inactive-color="#FC3B3B"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="所属机构" prop="organIds">
              <el-cascader v-model="formData.organIds" :options="organIdsOptions" :props="organIdsProps"
                           :style="{width: '100%'}" placeholder="请选择选择联级所属机构" filterable
                           clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属岗位" prop="postIds">
              <el-cascader v-model="formData.postIds" :options="postIdsOptions" :props="organIdsProps"
                           :style="{width: '100%'}" placeholder="请选择选择联级所属岗位" filterable
                           clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属部门" prop="deptIds">
              <el-cascader v-model="formData.deptIds" :options="deptIdsOptions" :props="organIdsProps"
                           :style="{width: '100%'}" placeholder="请选择选择联级所属部门" filterable
                           clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <div class="c-panel">
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">用户管理</div>
      <!-- ------------- 快捷按钮 ------------- -->
      <div class="fast-btn">
        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true;dialogTitle='新增用户'">
          新增
        </el-button>
        <div class="c-item">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="p.name"
              clearable>
          </el-input>
        </div>
      </div>
      <el-table
          :border="true"
          resizable
          ref="userTable"
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          max-height="450">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column
            prop="name"
            min-width="50"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="loginNo"
            min-width="60"
            label="帐号">
        </el-table-column>
        <el-table-column
            prop="phone"
            min-width="80"
            label="手机号">
        </el-table-column>
        <el-table-column
            min-width="60"
            :show-overflow-tooltip="true"
            label="用户角色">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.roleList" :key="item.id">{{ item.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            min-width="60"
            prop="typeName"
            label="用户类型">
        </el-table-column>
        <el-table-column
            min-width="60"
            label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex === 0 ">男</el-tag>
            <el-tag type="success" v-if="scope.row.sex === 1 ">女</el-tag>
            <el-tag type="danger" v-if="scope.row.sex === 2 ">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            min-width="120"
            label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" @change="change($event,scope.row.id)" active-text="正常"
                       inactive-text="锁定" active-color="#009DFF"
                       inactive-color="#FC3B3B"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="loginEndTime"
            min-width="80"
            label="最后登陆时间">
        </el-table-column>
        <el-table-column
            fixed="right"
            width="120"
            label="操作">
          <template slot-scope="scope">
            <el-popover
                placement="left"
                width="600"
                @show="show(scope.row.id)"
                :open-delay="200"
                :close-delay="200"
                trigger="hover">
              <el-descriptions title="用户信息" size="medium">
                <el-descriptions-item label="名称">{{ showData.name }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ showData.phone }}</el-descriptions-item>
                <el-descriptions-item label="登陆账号">{{ showData.loginNo }}</el-descriptions-item>
                <el-descriptions-item label="用户角色">
                  <el-tag v-for="item in showData.roleList" :key="item.id">{{ item.name }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                  <el-tag v-if="showData.sex === 0 ">男</el-tag>
                  <el-tag type="success" v-if="showData.sex === 1 ">女</el-tag>
                  <el-tag type="danger" v-if="showData.sex === 2 ">未知</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="用户类型">
                  <el-tag>{{ showData.typeName }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="状态">
                  <el-tag v-if="showData.status">正常</el-tag>
                  <el-tag type="danger" v-else>锁定</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="最后登陆时间">{{ showData.loginEndTime }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ showData.remark }}</el-descriptions-item>
              </el-descriptions>
              <el-button slot="reference" type="text">查看</el-button>
            </el-popover>

            <el-button
                @click.native.prevent="edit(scope.row.id)"
                type="text">
              编辑
            </el-button>
            <el-popconfirm
                trigger="hover"
                title="确认重置密码？重置后无法恢复！！"
                @confirm="reset(scope.row.id)"
            >
              <el-button
                  slot="reference"
                  type="text">
                重置密码
              </el-button>
            </el-popconfirm>
            <el-popconfirm
                title="确认移除用户？移除后无法恢复！！"
                @confirm="del(scope.row.id)"
            >
              <el-button
                  slot="reference"
                  type="text">
                移除
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination background
                       layout="total, prev, pager, next, sizes, jumper"
                       :current-page.sync="p.current"
                       :page-size.sync="p.size"
                       :total="p.total"
                       :page-sizes="[10, 20, 30, 40, 50, 100]"
                       @current-change="f5()"
                       @size-change="f5()">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
let PATH = "/user"
module.exports = {
  components: {},
  watch: {
    'p.name': _.debounce(function (){
      this.f5()
    },500)
  },
  data() {
    return {
      organIdsOptions: [],
      postIdsOptions: [],
      deptIdsOptions: [],
      organIdsProps: {
        "multiple": true,
        "expandTrigger": 'hover',
        "label": "label",
        "value": "value",
        "children": "children",
        "checkStrictly": true,
        "emitPath": false
      },
      tableData: [],
      p: {
        name: '',
        current: 1,
        size: 10,
        total: -1
      },
      showData: {
        id: undefined,
        name: undefined,
        loginNo: '',
        phone: undefined,
        userType: 'SYS',
        sex: 0,
        status: true,
        roleIds: [],
        remark: undefined,
        loginEndTime: '',
        roleList: [],
        permissionList: []
      },
      formData: {
        id: undefined,
        name: undefined,
        phone: undefined,
        userType: 'SYS',
        sex: 0,
        status: true,
        roleIds: [],
        remark: undefined,
        version: 0,
        roleList: [],
        organIds: [],
        postIds: [],
        deptIds: [],
        permissionList: []
      },
      rules: {
        name: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          validator: sa.checkPhone,
          trigger: 'blur'
        }],
        userType: [{
          required: true,
          message: '用户类型不能为空',
          trigger: 'change'
        }],
        sex: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],
        roleIds: [{
          required: true,
          type: 'array',
          message: '请至少选择一个角色',
          trigger: 'change'
        }],
        organIds: [{
          required: true,
          type: 'array',
          message: '请至少选择一个机构',
          trigger: 'change'
        }],
        postIds: [{
          required: true,
          type: 'array',
          message: '请至少选择一个岗位',
          trigger: 'change'
        }],
        deptIds: [{
          required: true,
          type: 'array',
          message: '请至少选择一个部门',
          trigger: 'change'
        }],
        remark: [],
      },
      typeOptions: [],
      sexOptions: [{
        "label": "男",
        "value": 0
      }, {
        "label": "女",
        "value": 1
      }, {
        "label": "未知",
        "value": 2
      }],
      roleIdsOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      dialogVisible: false,
      dialogTitle: ''
    }
  },
  methods: {
    reset(id) {
      sa.ajax(PATH + "/reset", {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {type: 'get'})
    },
    edit(id) {
      sa.ajax(PATH + "/get", {id: id}, (res) => {
        this.formData = res.data
        this.dialogVisible = true
        this.dialogTitle = '编辑用户'
      }, {type: 'get', msg: null})
    },
    change(status, id) {
      sa.ajax(PATH + "/update-status", {id: id, status: status}, (res) => {
        sa.msgOk(res.msg, () => {
          this.f5()
        })
      }, {msg: null})
    },
    del(id) {
      sa.ajax(PATH + "/del", {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {})
    },
    show(id) {
      sa.ajax(PATH + "/get", {id: id}, (res) => {
        this.showData = res.data
      }, {type: 'get', msg: null})
    },
    onOpen() {
      sa.ajax(PATH + "/init-form", {}, (res) => {
        this.roleIdsOptions = res.data.roleList
        this.organIdsOptions = res.data.organList
        this.postIdsOptions = res.data.postList
        this.deptIdsOptions = res.data.deptList
        this.typeOptions = res.data.typeOptions
      }, {type: 'get', msg: null})
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.dialogVisible = false
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        sa.ajax(PATH + "/save-or-update", {userDTO: JSON.stringify(this.formData)}, (res) => {
          sa.alert(res.msg, () => {
            this.close()
            this.f5();
          })
        }, {})
      })
    },
    f5() {
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {
    this.onOpen()
  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
